<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalClosable]="false"
    [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">{{ title | translate }}</h3>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <form #instanceForm="ngForm" class="clr-form clr-form-horizontal">
            <!-- 1. provider -->
            <clr-select-container>
                <label class="required">{{
                    'DISTRIBUTION.PROVIDER' | translate
                }}</label>
                <select
                    class="width-280"
                    clrSelect
                    name="provider"
                    id="provider"
                    [(ngModel)]="model.vendor"
                    required>
                    <option class="display-none" value=""></option>
                    <option
                        *ngFor="let provider of providers"
                        value="{{ provider.id }}">
                        {{ provider.name }}
                    </option>
                </select>
                <clr-control-error>
                    {{ 'TOOLTIP.ITEM_REQUIRED' | translate }}
                </clr-control-error>
            </clr-select-container>

            <!-- 2. name -->
            <div class="clr-form-control">
                <label class="required clr-control-label" for="name">{{
                    'DISTRIBUTION.NAME' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="
                        ((nameNg.dirty || nameNg.touched) && nameNg.invalid) ||
                        isNameExisting
                    ">
                    <div class="clr-input-wrapper">
                        <input
                            class="width-280 clr-input"
                            required
                            type="text"
                            id="name"
                            autocomplete="off"
                            [(ngModel)]="model.name"
                            name="name"
                            #nameNg="ngModel"
                            (input)="inputName()" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                        <span
                            class="spinner spinner-inline"
                            [hidden]="!checkNameOnGoing"></span>
                    </div>
                    <clr-control-error
                        *ngIf="
                            ((nameNg.dirty || nameNg.touched) &&
                                nameNg.invalid) ||
                            isNameExisting
                        ">
                        <span
                            *ngIf="
                                !(
                                    (nameNg.dirty || nameNg.touched) &&
                                    nameNg.invalid
                                ) && isNameExisting
                            "
                            >{{ 'SCANNER.NAME_EXISTS' | translate }}</span
                        >
                        <span
                            *ngIf="
                                (nameNg.dirty || nameNg.touched) &&
                                nameNg.invalid
                            "
                            >{{ 'TOOLTIP.ITEM_REQUIRED' | translate }}</span
                        >
                    </clr-control-error>
                </div>
            </div>

            <!-- 3. description -->
            <clr-textarea-container>
                <label>{{ 'DISTRIBUTION.DESCRIPTION' | translate }}</label>
                <textarea
                    clrTextarea
                    type="text"
                    id="description"
                    class="width-280"
                    row="3"
                    [(ngModel)]="model.description"
                    [ngModelOptions]="{ standalone: true }"></textarea>
            </clr-textarea-container>
            <!-- 4. endpoint -->
            <div class="clr-form-control">
                <label class="required clr-control-label" for="name">{{
                    'DISTRIBUTION.ENDPOINT' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="
                        ((endpointNg.dirty || endpointNg.touched) &&
                            endpointNg.invalid) ||
                        isEndpointExisting
                    ">
                    <div class="clr-input-wrapper">
                        <input
                            class="width-280 clr-input"
                            required
                            pattern="^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.*?)*$"
                            type="text"
                            id="endpoint"
                            placeholder="http(s)://192.168.1.1"
                            [(ngModel)]="model.endpoint"
                            name="endpoint"
                            #endpointNg="ngModel"
                            autocomplete="off"
                            (input)="inputEndpoint()" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                        <span
                            class="spinner spinner-inline"
                            [hidden]="!checkEndpointOngoing"></span>
                    </div>
                    <clr-control-error
                        *ngIf="
                            ((endpointNg.dirty || endpointNg.touched) &&
                                endpointNg.invalid) ||
                            isEndpointExisting
                        ">
                        <span
                            *ngIf="
                                !(
                                    (endpointNg.dirty || endpointNg.touched) &&
                                    endpointNg.invalid
                                ) && isEndpointExisting
                            "
                            >{{ 'SCANNER.ENDPOINT_EXISTS' | translate }}</span
                        >
                        <span
                            *ngIf="
                                (endpointNg.dirty || endpointNg.touched) &&
                                endpointNg.invalid
                            "
                            >{{ 'TOOLTIP.ENDPOINT_FORMAT' | translate }}</span
                        >
                    </clr-control-error>
                </div>
            </div>
            <!-- auth mode -->
            <clr-radio-container clrInline>
                <label>{{ 'DISTRIBUTION.AUTH_MODE' | translate }}</label>
                <clr-radio-wrapper>
                    <input
                        clrRadio
                        type="radio"
                        name="auth_mode"
                        id="none_mode"
                        value="NONE"
                        [(ngModel)]="model.auth_mode"
                        (change)="authModeChange()"
                        [ngModelOptions]="{ standalone: true }" />
                    <label for="none_mode">NONE</label>
                </clr-radio-wrapper>
                <clr-radio-wrapper>
                    <input
                        clrRadio
                        type="radio"
                        name="auth_mode"
                        id="basic_mode"
                        value="BASIC"
                        [(ngModel)]="model.auth_mode"
                        (change)="authModeChange()"
                        [ngModelOptions]="{ standalone: true }" />
                    <label for="basic_mode">Basic</label>
                </clr-radio-wrapper>
                <clr-radio-wrapper>
                    <input
                        clrRadio
                        type="radio"
                        name="auth_mode"
                        id="token_mode"
                        value="OAUTH"
                        [(ngModel)]="model.auth_mode"
                        (change)="authModeChange()"
                        [ngModelOptions]="{ standalone: true }" />
                    <label for="token_mode">OAuth</label>
                </clr-radio-wrapper>
            </clr-radio-container>
            <!-- auth data -->
            <span *ngIf="model.auth_mode === 'BASIC'">
                <clr-input-container>
                    <label
                        class="required clr-control-label"
                        for="auth_data_username"
                        >{{ 'DISTRIBUTION.USERNAME' | translate }}</label
                    >
                    <input
                        class="width-280"
                        clrInput
                        required
                        type="text"
                        id="auth_data_username"
                        [(ngModel)]="authData['username']"
                        placeholder="{{
                            'DISTRIBUTION.SETUP.USERNAME_PLACEHOLDER'
                                | translate
                        }}"
                        name="auth_data_username"
                        autocomplete="off" />
                    <clr-control-error>
                        {{ 'TOOLTIP.ITEM_REQUIRED' | translate }}
                    </clr-control-error>
                </clr-input-container>
                <clr-input-container>
                    <label
                        class="required clr-control-label"
                        for="auth_data_password"
                        >{{ 'DISTRIBUTION.PASSWORD' | translate }}</label
                    >
                    <input
                        class="width-280"
                        clrInput
                        required
                        type="password"
                        id="auth_data_password"
                        [(ngModel)]="authData['password']"
                        placeholder="{{
                            'DISTRIBUTION.SETUP.PASSWORD_PLACEHOLDER'
                                | translate
                        }}"
                        name="auth_data_password"
                        autocomplete="off" />
                    <clr-control-error>
                        {{ 'TOOLTIP.ITEM_REQUIRED' | translate }}
                    </clr-control-error>
                </clr-input-container>
            </span>
            <span *ngIf="model.auth_mode === 'OAUTH'">
                <clr-input-container>
                    <label
                        class="required clr-control-label"
                        for="auth_data_token"
                        >{{ 'DISTRIBUTION.TOKEN' | translate }}</label
                    >
                    <input
                        class="width-280"
                        clrInput
                        required
                        type="password"
                        id="auth_data_token"
                        [(ngModel)]="authData['token']"
                        placeholder="{{
                            'DISTRIBUTION.SETUP.TOKEN_PLACEHOLDER' | translate
                        }}"
                        name="auth_data_token"
                        autocomplete="off" />
                    <clr-control-error>
                        {{ 'TOOLTIP.ITEM_REQUIRED' | translate }}
                    </clr-control-error>
                </clr-input-container>
            </span>
            <span *ngIf="model.auth_mode === 'NONE'"></span>

            <!-- 5. enabled -->
            <div class="clr-form-control">
                <label class="clr-control-label">{{
                    'SCANNER.OPTIONS' | translate
                }}</label>
                <div class="clr-control-container padding-top-3">
                    <clr-checkbox-wrapper>
                        <input
                            clrCheckbox
                            id="enabled"
                            name="enabled"
                            type="checkbox"
                            [(ngModel)]="model.enabled" />
                        <label for="enabled"
                            ><span>{{
                                'DISTRIBUTION.ENABLED' | translate
                            }}</span></label
                        >
                    </clr-checkbox-wrapper>
                    <clr-checkbox-wrapper>
                        <input
                            name="insecure"
                            clrCheckbox
                            type="checkbox"
                            id="insecure"
                            [(ngModel)]="model.insecure" />
                        <label for="insecure"
                            >{{ 'SCANNER.SKIP' | translate }}
                            <clr-tooltip>
                                <clr-icon
                                    class="color-57"
                                    clrTooltipTrigger
                                    shape="info-circle"
                                    size="24"></clr-icon>
                                <clr-tooltip-content
                                    clrPosition="top-left"
                                    clrSize="md"
                                    *clrIfOpen>
                                    {{
                                        'P2P_PROVIDER.SKIP_CERT_VERIFY'
                                            | translate
                                    }}
                                </clr-tooltip-content>
                            </clr-tooltip>
                        </label>
                    </clr-checkbox-wrapper>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button
            id="button-test"
            type="button"
            [clrLoading]="checkBtnState"
            class="btn btn-outline"
            (click)="onTestEndpoint()"
            [disabled]="
                !isValid ||
                onTesting ||
                checkNameOnGoing ||
                checkEndpointOngoing ||
                isEndpointExisting ||
                isNameExisting
            ">
            {{ 'SCANNER.TEST_CONNECTION' | translate }}
        </button>
        <button type="button" class="btn btn-outline" (click)="cancel()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            id="instance-ok"
            [clrLoading]="saveBtnState"
            type="button"
            class="btn btn-primary"
            (click)="submit()"
            [disabled]="
                !isValid ||
                !hasChangesForEdit() ||
                checkNameOnGoing ||
                checkEndpointOngoing
            ">
            {{ 'BUTTON.OK' | translate }}
        </button>
    </div>
</clr-modal>
